<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>客户管理</el-breadcrumb-item>
      <el-breadcrumb-item>更改床位</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-button type="primary" @click="openRegisterDialog">更改床位</el-button>
      </el-col>
      <el-col :span="4" :offset="16">
        <el-input placeholder="请输入姓名" clearable v-model="name" @clear="search">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table
        :data="bedLogList"
        style="width: 100%;text-align: center">
      <el-table-column label="编号" type="index" align="center"></el-table-column>
      <el-table-column
          prop="older.name"
          label="长者姓名"
          align="center">
      </el-table-column>
      <el-table-column
          prop="older.sex"
          label="性别"
          align="center">
      </el-table-column>
      <el-table-column
          prop="older.idcard"
          label="身份证号"
          align="center">
      </el-table-column>
      <el-table-column
          prop="oldbed.bedname"
          label="原床位"
          align="center">
      </el-table-column>
      <el-table-column
          prop="newbed.bedname"
          label="新床位"
          align="center">
      </el-table-column>
      <el-table-column
          prop="changedate"
          label="更换日期"
          align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
              type="danger"
              size="mini"
              @click="deleteBedLog(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 6 , 12, 24]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    ></el-pagination>

    <!--    更换床位-->
    <el-dialog title="更换床位" :visible.sync="RegisterDialogVisible"
               width="50%" @close="RegisterFormClose" :close-on-click-modal="false">
      <el-form
          :model="RegisterForm"
          :rules="RegisterFormRules"
          ref="RegisterFormRef"
          label-width="100px"
          class="demo-ruleForm"
          inline-message="true"
      >
        <el-form-item label="长者" prop="name">
          <input style="width: 220px;text-align: center;height: 34px;     border-radius: 4px;border: 1px solid #DCDFE6;"
                 v-model="RegisterForm.name" readonly @click="innerDialog" />
        </el-form-item>
        <el-form-item label="原床位" prop="oldbedId">
          <el-input v-model="item.bedname" :disabled="true" :label="item.bedname" v-for="item in bedList" v-if="item.id == RegisterForm.oldbedId"></el-input>
        </el-form-item>
        <el-form-item label="新床位" prop="newbedId">
          <el-input v-model="item.bedname" readonly :label="item.bedname" v-for="item in bedList" v-if="item.id == RegisterForm.newbedId"></el-input>
          <el-button size="mini" type="primary" @click.prevent="innerDialog2">选择</el-button>
        </el-form-item>
        <el-form-item label="更换日期" prop="changedate" >
          <el-date-picker
              v-model="RegisterForm.changedate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="RegisterForm.bedlogRemark" type="textarea"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Register">确 定</el-button>
        <el-button @click="RegisterFormClose">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 选择长者信息 -->
    <el-dialog title="选择长者信息" :visible.sync="innerDialogVisible" @close="innerClose" :close-on-click-modal="false" width="70%">
      <el-row :gutter="20">
        <el-col :span="6" :offset="18">
          <el-input placeholder="请输入姓名" clearable v-model="innerName" @clear="searchOlder">
            <el-button slot="append" icon="el-icon-search" @click="searchOlder"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table
          :data="innerOlderList"
          style="width: 100%;text-align: center">
        <el-table-column label="编号" type="index" align="center"></el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            align="center">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            align="center">
        </el-table-column>
        <el-table-column
            label="床位号"
            align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.bedId == item.id" v-for="item in bedList">{{item.bedname}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="idcard"
            label="身份证号"
            align="center">
        </el-table-column>
        <el-table-column
            prop="checkdate"
            label="入住日期"
            align="center">
        </el-table-column>
        <el-table-column
            prop="status"
            label="在院状态"
            align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">入住</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="selectOlder(scope.row)">选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="innerHandleSizeChange"
          @current-change="innerHandleCurrentChange"
          :current-page="innerPageNum"
          :page-sizes="[3, 6 , 12, 24]"
          :page-size="innerPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="innerTotal"
      ></el-pagination>
    </el-dialog>
    <!-- 选择新床位 -->
    <el-dialog class="el-st" title="选择新床位" :visible.sync="innerDialog2Visible" @close="innerClose2" :close-on-click-modal="false" width="70%"
          top="50px" >
      <el-container >
      <div class="one">
        <div class="two">
          <!--楼栋数据-->
          <template>
            <el-table
                :data="buildingList"
                style="width: 100%"
                @row-click="getBuildingId"
                highlight-current-row
            >
              <el-table-column
                  prop="buildingname"
                  label="楼栋"
                  align="center"
              >
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
        <div class="one">
        <div class="two">
          <!--楼层数据-->
          <template>
            <el-table
                :data="storeyList"
                style="width: 100%"
                @row-click="getStoreyId"
                highlight-current-row
            >
              <el-table-column
                  prop="storeyname"
                  label="楼层"
                  align="center"
              >
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div >
          <div class="one">
          <div class="two">
            <!--房间数据-->
            <template>
              <el-table
                  :data="roomList"
                  style="width: 100%"
                  @row-click="getRoomId"
                  highlight-current-row
              >
                <el-table-column
                    prop="roomname"
                    label="房间"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="housetype"
                    label="房间类型"
                    align="center">
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
            <div class="one">
            <div class="two">
              <!--床位数据-->
              <template>
                <el-table
                    :data="roomBedList"
                    style="width: 100%"
                    highlight-current-row
                >
                  <el-table-column
                      prop="bedname"
                      label="床位"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="state"
                      label="床位状态"
                      align="center">
                    <template slot-scope="bed">
                      <span style="color: green" v-if="bed.row.state==0">空闲</span>
                      <span style="color: red" v-if="bed.row.state==1">入住</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button
                          size="mini"
                          type="primary"
                          v-if="scope.row.state == 0"
                          @click="selectNewBed(scope.row)">选择
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </div>
          </div>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bedLogList:[],
      pageNum: 1,
      pageSize: 3,
      total:9,
      name:'',
      older:{},
      RegisterDialogVisible:false,
      RegisterForm:{
        olderId:0,
        name:'',
        oldbedId:0,
        newbedId:0,
        bedlogRemark:'',
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime()+24*3600*1000 < Date.now();
        },
      },
      RegisterFormRules:{
        name: { required: true, message: "请输入姓名", trigger: "change" },
        changedate:{required: true, message: "请选择日期", trigger: "blur" },
        newbedId: {required: true, message: "请选择新床位", trigger: "blur" }

      },
      innerPageNum:1,
      innerPageSize:3,
      innerTotal:9,
      innerName:'',
      innerOlderList:[],
      innerDialogVisible:false,
      bedList:[],
      innerDialog2Visible:false,
      buildingList: [],
      storeyList: [],
      roomList: [],
      roomBedList:[],
      buildingNum: 0,
      storeyNum: 0,
      roomNum: 0,
      bedNum: 0,
      buildingId: 0,
      buildingName: '',
      storeyId: 0,
      storeyName: '',
      roomId: 0,
      roomName: '',
      bedId: 0,
    }
  },
  methods:{
    //更换床位
    openRegisterDialog(){
      this.initBedData();
      this.RegisterDialogVisible = true;
    },
    RegisterFormClose(){
      this.$refs.RegisterFormRef.resetFields();
      this.RegisterDialogVisible = false;
    },
    Register(){
      let url = '/bedLog/changeBed' ;
      let param = {olderId: this.RegisterForm.olderId,oldbedId: this.RegisterForm.oldbedId,newbedId: this.RegisterForm.newbedId,changedate:this.RegisterForm.changedate,bedlogRemark:this.RegisterForm.bedlogRemark};
      this.$refs.RegisterFormRef.validate((val)=>{
        if(val){
          this.$axios.post(url,param).then((res)=>{
            if(res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success',
                duration: 1000
              });
              this.RegisterDialogVisible = false;
              this.initExitData();
            }else {
              this.$message({
                message: res.data.msg,
                type:'error',
                duration:1000
              })

            }
          })
        }else {
          alert("请完善信息");
        }
      })
    },

    //选择长者
    innerDialog(){
      this.innerDialogVisible = true;
      this.searchInnerOlder();
    },
    selectOlder(older){
      this.RegisterForm.olderId = older.id;
      this.RegisterForm.name = older.name;
      this.RegisterForm.oldbedId = older.bedId;
      this.innerDialogVisible = false;
      this.$refs.RegisterFormRef.validateField('name');
    },
    innerClose(){
      this.innerDialogVisible = false;
    },

    //查询所有入住长者信息
    searchOlder() {
      this.innerPageNum = 1;
      this.searchInnerOlder();
    },
    searchInnerOlder(){
      this.initBedData();
      let url = "/older/selectOlderByStatus?now="+this.innerPageNum+"&size="+this.innerPageSize+"&name="+this.innerName;
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.innerOlderList = res.data.data.list;
          this.innerTotal = res.data.data.total;
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },
    innerHandleSizeChange(newSize) {
      this.innerPageSize = newSize;
      this.innerPageNum = 1;
      this.searchInnerOlder();
    },
    innerHandleCurrentChange(newPage) {
      //alert(newPage);
      this.innerPageNum = newPage;
      this.searchInnerOlder();
    },
    //查询所有床位信息
    initBedData(){
      let url = "/older/selectAllBed";
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.bedList = res.data.data;
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },

    //选择新床位
    innerDialog2(){
      this.innerDialog2Visible = true;
      this.initBuilding();
    },
    selectNewBed(bed){
      this.innerDialog2Visible = false;
      this.buildingList = [];
      this.storeyList = [];
      this.roomList = [];
      this.roomBedList = [];
      this.RegisterForm.newbedId = bed.id;
    },
    innerClose2(){
      this.buildingList = [];
      this.storeyList = [];
      this.roomList = [];
      this.roomBedList = [];
    },
    initBuilding() {
      let url1 = "/building/list"
      this.$axios.get(url1).then((res) => {
        if (res.data.code == 200) {
          this.buildingList = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
      let url2 = "/building/num"
      this.$axios.get(url2).then((res) => {
        if (res.data.code == 200) {
          this.buildingNum = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    initStorey() {
      let url3 = "/storey/list/" + this.buildingId
      this.$axios.get(url3).then((res) => {
        if (res.data.code == 200) {
          this.storeyList = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
      let url4 = "/storey/num/" + this.buildingId
      this.$axios.get(url4).then((res) => {
        if (res.data.code == 200) {
          this.storeyNum = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    initRoom() {
      let url5 = "/room/list/" + this.storeyId
      this.$axios.get(url5).then((res) => {
        if (res.data.code == 200) {
          this.roomList = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
      let url6 = "/room/num/" + this.storeyId
      this.$axios.get(url6).then((res) => {
        if (res.data.code == 200) {
          this.roomNum = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    initBed() {
      let url7 = "/bed/list/" + this.roomId
      this.$axios.get(url7).then((res) => {
        if (res.data.code == 200) {
          this.roomBedList = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
      let url8 = "/bed/num/" + this.roomId
      this.$axios.get(url8).then((res) => {
        if (res.data.code == 200) {
          this.bedNum = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    // 行鼠标点击事件
    getBuildingId(row) {
      this.buildingId = row.id;
      this.storeyId = 0;
      this.storeyName = '';
      this.roomId = 0;
      this.roomName = '';
      this.buildingName = row.buildingname;
      this.initStorey()
      this.initRoom()
      this.initBed();
    },
    getStoreyId(row) {
      this.storeyId = row.id;
      this.roomId = 0;
      this.roomName = '';
      this.storeyName = row.storeyname;
      this.initRoom();
      this.initBed()
    },
    getRoomId(row) {
      this.roomId = row.id;
      this.roomName = row.roomname;
      this.initBed();
    },



    //删除记录
    deleteBedLog(id){
      let url = "/bedLog/deleteBedLog?id="+id;
      this.$confirm("你确定要删除此记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$axios.get(url).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1000
            });
            this.initExitData();
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })
    },


    //查询所有出院信息
    search() {
      this.pageNum = 1;
      this.initExitData();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNum = 1;
      this.initExitData();
    },
    handleCurrentChange(newPage) {
      //alert(newPage);
      this.pageNum = newPage;
      this.initExitData();
    },
    initExitData(){
      let url = "/bedLog/selectBedLogByname?now="+this.pageNum+"&size="+this.pageSize+"&name="+this.name;
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.bedLogList = res.data.data.list;
          this.total = res.data.data.total;
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    }
  },
  created() {
    this.initExitData();
  }
}
</script>

<style scoped>

.one {
  width: 23%;
  height: 800px;
  background-color: #ffffff;
  display: inline-block;
  margin-left: 15px;
}

.two {
  width: 100%;
  height: 740px;
}

.three {
  width: 100%;
  height: 60px;
  line-height: 40px;
  border-top: 1px #dbdada solid;
}
</style>